<template>
  <div v-loading="addOrEditLoading" class="main addOrEditClass">
    <section v-if="!loading">
      <el-form ref="form" label-width="150px" size="medium" :model="addOrEditForm">
        <div class="block-header"><div>{{ $route.query.id ? '编辑' : '新增' }}</div></div>
        <el-form-item label="分类:" prop="firstCategory" :rules="commonRules.notNullRule">
          <el-select v-model="addOrEditForm.firstCategory" :disabled="selectDisabled" @change="getChildCategoryData" v-if="!$route.query.id">
            <el-option v-for="item in firstCategories" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
          <el-input v-if="$route.query.id" v-model="addOrEditForm.firstCategoryTitle" :disabled="selectDisabled"></el-input>
        </el-form-item>
        <el-form-item v-if="secondCategories.length>0" label="子分类:" prop="sencondCategoryTitle" :rules="commonRules.notNullRule">
          <el-select v-model="addOrEditForm.sencondCategoryTitle" @change="getthirdCategoryData">
            <el-option v-for="item in secondCategories" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="templateType===2 && templateProperties===1">
          <el-form-item label="选择商品:" prop="goodsOrpackage" :rules="commonRules.notNullRule">
            <el-button v-if="isShowGoods" type="primary" size="medium" plain @click="chooseOneGoods(1)">选择商品</el-button>
            <el-button v-if="isShowPackage" type="primary" size="medium" plain @click="chooseOneGoods(2)">选择套餐</el-button>
          </el-form-item>
          <el-form-item label="选择的商品/套餐:" prop="goodsOrpackage" :rules="commonRules.notNullRule">
            <el-table :data="addOrEditForm.goods">
              <el-table-column align="center" label="名称" prop="goodsName"></el-table-column>
              <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                  <span>{{ scope.row.goodsType === 1? '商品' : '套餐' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <a href="javascript: void(0);" class="el-icon-remove" @click="delItem(scope.row, scope.$index)"></a>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <el-form-item label="标题:" prop="title" :rules="commonRules.notNullRule">
          <el-input v-model="addOrEditForm.title" placeholder="输入标题不超过30字" maxlength="30"></el-input>
        </el-form-item>
        <!-- 文章模板显示 -->
        <template v-if="templateType===3">
          <el-form-item label="概要:" prop="summary">
            <el-input v-model="addOrEditForm.summary" placeholder="输入概要120字" maxlength="120"></el-input>
          </el-form-item>
          <el-form-item label="关键词:" prop="keyWords">
            <el-input v-model="addOrEditForm.keyWords" placeholder="输入关键词逗号隔开"></el-input>
          </el-form-item>
        </template>
        <el-form-item v-if="templateType===1" label="内容:" prop="content" :rules="commonRules.notNullRule">
          <el-input v-model="addOrEditForm.content" type="textarea" maxlength="800" placeholder="输入内容不超过800字"></el-input>
        </el-form-item>
        <el-form-item label="封面:" prop="cover" :rules="commonRules.notNullRule">
          <el-upload
            id="cover"
            class="avatar-uploader"
            accept="image/*"
            :action="upladUrl"
            :show-file-list="false"
            :before-upload="beforeUploadImg"
            :on-success="(res)=>{
              addOrEditForm.cover = replaceImgUrl(res.filePath)
            }">
            <img v-if="addOrEditForm.cover" :src="addOrEditForm.cover" class="avatar">
            <i v-if="!addOrEditForm.cover" class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="color: red">单张图片控制在5M以内</div>
        </el-form-item>
        <el-form-item v-if="(templateType<=2 ||addOrEditForm.firstCategory===5)&&thirdCategories.length>0" label="分类标签:" prop="tags" :rules="commonRules.notNullRule">
          <el-checkbox-group v-model="addOrEditForm.tags">
            <el-checkbox v-for="item in thirdCategories" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 文章模板显示 -->
        <template v-if="templateType===3">
          <el-form-item label="内容:" prop="contentType" :rules="commonRules.notNullRule">
            <el-radio-group v-model="addOrEditForm.contentType" @change="addOrEditForm.content=''">
              <el-radio :label="1">编辑器</el-radio>
              <el-radio :label="2">URL链接</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.contentType===1" prop="content" :rules="commonRules.notNullRule">
            <tinymce v-model="addOrEditForm.content" placeholder="请输入文章内容"></tinymce>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.contentType===2" prop="content" :rules="commonRules.urlRule">
            <el-input v-model="addOrEditForm.content" placeholder="输入URL仅支持内置H5链接和微信文章链接"></el-input>
          </el-form-item>
        </template>
        <!-- 素材圈展示 -->
        <template v-if="templateType===1">
          <el-form-item label="类型:" prop="mediaType" :rules="commonRules.notNullRule">
            <el-radio-group v-model="addOrEditForm.mediaType" @change="getMediaType">
              <el-radio :label="2">图片</el-radio>
              <el-radio :label="8">视频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.mediaType===2" prop="mediaResources.resourceUrl" :rules="commonRules.notNullRule">
            <ul class="upload-img-list">
              <draggable v-model="addOrEditForm.mediaResources.resourceUrl" :options="{group:'addOrEditForm.mediaResources.resourceUrl'}" @start="drag=true" @end="drag=false">
                <li v-for="(imgItem, imgIndex) of addOrEditForm.mediaResources.resourceUrl" :key="imgIndex" class="img-preview">
                  <img :src="imgItem" alt="">
                  <div class="img-preview-mask">
                    <div class="mask-btn">
                      <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.mediaResources.resourceUrl.splice(imgIndex, 1)}"></i>
                    </div>
                  </div>
                </li>
              </draggable>
              <li>
                <label class="upload-btn">
                  <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.mediaResources.resourceUrl,9,'img')}" />
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                  <span class="uploadLocal">本地上传</span>
                </label>
              </li>
            </ul>
            <div style="color: red">最多添加9张，单张图片控制在5M以内</div>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.mediaType===8" prop="mediaResources.resourceUrl[0]" :rules="commonRules.notNullRule">
            <el-upload
              v-loading="videoLoading"
              class="avatar-uploader videoLoading"
              accept="video/mp4,video/quicktime"
              :show-file-list="false"
              :action="uploadShotUrl"
              :data="videoParams"
              :before-upload="beforeUploadVideo"
              :on-success="handleAvatarSuccess"
              element-loading-text="拼命加载中"
            >
              <video v-if="addOrEditForm.mediaResources.resourceUrl[0]" :src="addOrEditForm.mediaResources.resourceUrl[0]" autoplay="autoplay" loop="loop">
                您的浏览器不支持HTML5 Video
              </video>
              <i v-if="!addOrEditForm.mediaResources.resourceUrl[0]" class="el-icon-plus avatar-uploader-icon"></i>
              <span v-if="!addOrEditForm.mediaResources.resourceUrl[0]" class="uploadLocal">本地上传</span>
            </el-upload>
            <div style="color: red">最多1个视频控制在25M以内，仅支持MP4</div>
          </el-form-item>
          <el-form-item label="跳转类型:" prop="urlType" :rules="commonRules.notNullRule">
            <el-radio-group v-model="addOrEditForm.urlType">
              <el-radio :label="1">无</el-radio>
              <el-radio :label="2">URL</el-radio>
              <el-radio :label="3">内页</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.urlType === 2" label="链接图片:" prop="urlDetail.videoPreviewImg" :rules="commonRules.notNullRule">
            <el-upload
              class="avatar-uploader"
              accept="image/*"
              :action="upladUrl"
              :show-file-list="false"
              :before-upload="beforeUploadImg"
              :on-success="(res)=>{
                addOrEditForm.urlDetail.videoPreviewImg = replaceImgUrl(res.filePath)
              }">
              <img v-if="addOrEditForm.urlDetail.videoPreviewImg" :src="addOrEditForm.urlDetail.videoPreviewImg" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.urlType === 2" label="链接文案:" prop="urlDetail.resourceText" :rules="commonRules.notNullRule">
            <el-input v-model="addOrEditForm.urlDetail.resourceText" placeholder="请输入链接文案"></el-input>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.urlType === 2" label="链接地址:" prop="urlDetail.resourceUrl" :rules="commonRules.urlRule">
            <el-input v-model="addOrEditForm.urlDetail.resourceUrl" placeholder="请输入链接地址"></el-input>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.urlType === 3" label="选择商品:" prop="goodsOrpackage" :rules="commonRules.notNullRule">
            <el-button type="primary" size="medium" plain @click="chooseGoods">选择商品</el-button>
            <el-button type="primary" size="medium" plain @click="choosePackage">选择套餐</el-button>
          </el-form-item>
          <el-form-item v-if="addOrEditForm.urlType === 3" label="选择的商品/套餐" prop="goodsOrpackage" :rules="commonRules.notNullRule">
            <el-table :data="addOrEditForm.goods">
              <el-table-column align="center" label="名称" prop="goodsName"></el-table-column>
              <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                  <span>{{ scope.row.goodsType === 1? '商品' : '套餐' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <a href="javascript: void(0);" class="el-icon-remove" @click="delItem(scope.row, scope.$index)"></a>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </template>
        <template v-if="templateType===2 && templateProperties===1">
          <!-- 产品介绍： -->
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="产品介绍:" prop="socialMaterialResourceDTO.goodsDescImgs">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.goodsDescImgs" :options="{group:'addOrEditForm.socialMaterialResourceDTO.goodsDescImgs'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.goodsDescImgs" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.goodsDescImgs.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.goodsDescImgs,'','img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下载包:" prop="socialMaterialResourceDTO.goodsDescDownload">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.goodsDescDownload" :options="{group:'addOrEditForm.socialMaterialResourceDTO.goodsDescDownload'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.goodsDescDownload" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.goodsDescDownload.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.goodsDescDownload,10,'img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
                <div style="color: red">最多添加10张，单张图片控制在5M以内</div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 海报/视频: -->
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="海报/视频:" prop="socialMaterialResourceDTO.posterImgs">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.posterImgs" :options="{group:'addOrEditForm.socialMaterialResourceDTO.posterImgs'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.posterImgs" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.posterImgs.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.posterImgs,'','img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
              <!-- 视频 -->
              <el-form-item prop="socialMaterialResourceDTO.videos">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.videos" :options="{group:'addOrEditForm.socialMaterialResourceDTO.videos'}" @start="drag=true" @end="drag=false">
                    <li v-for="(videoItem, videoIndex) of addOrEditForm.socialMaterialResourceDTO.videos" :key="videoIndex" class="img-preview">
                      <video v-if="videoItem.resourceUrl" :src="videoItem.resourceUrl" autoplay="autoplay" loop="loop">您的浏览器不支持HTML5 Video</video>
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.videos.splice(videoIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label v-loading="mulVideoLoading" class="upload-btn videoLoading" element-loading-text="拼命加载中">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.videos,'','video')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传视频</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下载包:" prop="socialMaterialResourceDTO.posterDownload">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.posterDownload" :options="{group:'addOrEditForm.socialMaterialResourceDTO.posterDownload'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.posterDownload" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.posterDownload.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.posterDownload,10,'img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
                <div style="color: red">最多添加10张，单张图片控制在5M以内</div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 产品实验: -->
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="产品实验:" prop="socialMaterialResourceDTO.productTests">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.productTests" :options="{group:'addOrEditForm.socialMaterialResourceDTO.productTests'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.productTests" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.productTests.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.productTests,'','img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下载包:" prop="socialMaterialResourceDTO.productTestsDownload">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.productTestsDownload" :options="{group:'addOrEditForm.socialMaterialResourceDTO.productTestsDownload'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.productTestsDownload" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.productTestsDownload.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.productTestsDownload,10,'img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
                <div style="color: red">最多添加10张，单张图片控制在5M以内</div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 质检报告: -->
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="质检报告:" prop="socialMaterialResourceDTO.reports">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.reports" :options="{group:'addOrEditForm.socialMaterialResourceDTO.reports'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.reports" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.reports.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.reports,'','img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下载包:" prop="socialMaterialResourceDTO.reportsDownload">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.reportsDownload" :options="{group:'addOrEditForm.socialMaterialResourceDTO.reportsDownload'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.reportsDownload" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.reportsDownload.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.reportsDownload,10,'img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
                <div style="color: red">最多添加10张，单张图片控制在5M以内</div>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template v-if="templateType===2 && templateProperties===2">
          <!-- 详情介绍： -->
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="详情介绍:" prop="socialMaterialResourceDTO.goodsDescImgs">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.goodsDescImgs" :options="{group:'addOrEditForm.socialMaterialResourceDTO.goodsDescImgs'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.goodsDescImgs" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.goodsDescImgs.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.goodsDescImgs,'','img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下载包:" prop="socialMaterialResourceDTO.goodsDescDownload">
                <ul class="upload-img-list">
                  <draggable v-model="addOrEditForm.socialMaterialResourceDTO.goodsDescDownload" :options="{group:'addOrEditForm.socialMaterialResourceDTO.goodsDescDownload'}" @start="drag=true" @end="drag=false">
                    <li v-for="(imgItem, imgIndex) of addOrEditForm.socialMaterialResourceDTO.goodsDescDownload" :key="imgIndex" class="img-preview">
                      <img :src="imgItem" alt="">
                      <div class="img-preview-mask">
                        <div class="mask-btn">
                          <i title="删除" class="el-icon-delete" @click="()=>{addOrEditForm.socialMaterialResourceDTO.goodsDescDownload.splice(imgIndex, 1)}"></i>
                        </div>
                      </div>
                    </li>
                  </draggable>
                  <li>
                    <label class="upload-btn">
                      <input type="file" multiple @change="(event)=>{uploadImg(event, addOrEditForm.socialMaterialResourceDTO.goodsDescDownload,10,'img')}" />
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <span class="uploadLocal">本地上传</span>
                    </label>
                  </li>
                </ul>
                <div style="color: red">最多添加10张，单张图片控制在5M以内</div>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <el-form-item label="虚拟值:" prop="fakerNum" :rules="commonRules.fakerNumRule">
          <el-input v-model="addOrEditForm.fakerNum"></el-input>
        </el-form-item>
        <el-form-item label="是否置顶:" prop="stickStatus">
          <el-switch v-model="addOrEditForm.stickStatus" :active-value="1" :inactive-value="0"></el-switch>
          <div v-if="addOrEditForm.stickStatus" class="agingClass">
            <el-input v-model="addOrEditForm.stickTime" prop="stickTime"></el-input>
            <el-select v-model="addOrEditForm.stickTimeUnit" prop="stickTimeUnit">
              <el-option label="分" :value="1"></el-option>
              <el-option label="时" :value="2"></el-option>
              <el-option label="天" :value="3"></el-option>
              <el-option label="月" :value="4"></el-option>
              <el-option label="年" :value="5"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="是否展示:" prop="showApp">
          <el-switch v-model="addOrEditForm.showApp" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="发布人:" prop="appUserId" :rules="commonRules.notNullRule">
          <el-select v-model="addOrEditForm.appUserId" :disabled="selectDisabled">
            <el-option v-for="item in accountsData" :key="item.id" :label="item.nickName" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" style="margin-top:20px;">
          <el-button type="primary" size="medium" plain @click="save">保存</el-button>
          <el-button type="info" size="medium" plain @click="$router.push({ name: 'list' })">返回列表</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import Tinymce from '@/components/Tinymce'
import differenceBy from 'lodash/differenceBy'
export default {
  name: 'listAdd',
  components: {
    Tinymce,
    draggable
  },
  data() {
    return {
      addOrEditLoading: false,
      loading: true,
      addOrEditForm: {
        firstCategory: '',
        sencondCategory: '',
        title: '',
        summary: '', // 概要
        keyWords: '', // 关键字
        contentType: 1, // 内容类型判断
        content: '',
        cover: '',
        tags: [], // 分类标签
        mediaType: 2, // 类型--图片  视频
        mediaResources: {
          resourceUrl: [],
          videoPreviewImg: ''
        },
        socialMaterialResourceDTO: {
          goodsDescDownload: [],
          goodsDescImgs: [], // 商品描述（详情介绍）
          posterDownload: [],
          posterImgs: [], // "海报",
          productTestsDownload: [],
          productTests: [], // 产品试验
          reportsDownload: [],
          reports: [], // 质检报告
          videos: []
        },
        fakerNum: '', // 虚拟值
        urlType: 1, // 跳转类型
        urlDetail: { // 跳转明细
          resourceText: '',
          resourceUrl: '',
          videoPreviewImg: ''
        },
        goodsOrpackage: 1,
        goods: [],
        stickTime: '', // 时效
        stickTimeUnit: 1,
        stickStatus: 0, // "置顶状态 0=取消 1=置顶"
        showApp: 1,
        appUserId: '' // 发布人
      },
      isShowPackage: true,
      isShowGoods: true,
      firstCategories: [],
      secondCategories: [],
      thirdCategories: [],
      templateType: 1, // 一级分类有返回一个templateType 1：素材模板 2：商品模板 3：文章模板
      templateProperties: 1, // 二级分类有返回一个templateProperties 1：全版 2 简版
      accountsData: [],
      selectDisabled: false,
      videoLoading: false,
      mulVideoLoading: false,
      videoParams: {
        shot: true
      },
      addFilesLen:0,
      sencondCategoryTitle:''
    }
  },
  async created() {
    if (this.$route.query.id) {
      await this.getData()
      this.selectDisabled = true
    }
    this.getCategoryData()
    this.accounts()
  },
  methods: {
    getDataOther() {
      if (this.$route.query.id) {
        this.getData()
        this.selectDisabled = true
      }
    },
    getData() {
      return new Promise((resolve, reject) => {
        this.request({
          url: '/zhongcao-web-manage/social-material/get-detail',
          method: 'get',
          params: { id: this.$route.query.id }
        }).then((res) => {
          this.addOrEditForm = res.data
          this.addOrEditForm.stickTimeUnit = !res.data.stickTimeUnit ? 1 : this.addOrEditForm.stickTimeUnit
          this.addOrEditForm.goodsOrpackage = res.data.goods.length ? res.data.goods[0].goodsType : 1
          resolve(res.data)
        }).catch(err => {
          console.log(err)
          reject(err)
        })
      })
    },
    getMediaType() {
      this.addOrEditForm.mediaResources.resourceUrl = []
      this.addOrEditForm.mediaResources.videoPreviewImg = ''
    },
    getCategoryData() {
      this.request({
        url: '/zhongcao-web-manage/social-material/search-condition',
        method: 'get',
        params: {
          type: 1
        }
      }).then((res) => {
        this.firstCategories = res.data.firstCategories
        if (!this.$route.query.id) {
          this.addOrEditForm.firstCategory = res.data.firstCategories.length > 0 ? res.data.firstCategories[0].id : ''
        }
        this.getChildCategoryData(this.addOrEditForm.firstCategory)
      }).catch(err => {
        console.log(err)
      })
    },
    getChildCategoryData(id) {
      console.log('id------', id)
      this.request({
        url: '/zhongcao-web-manage/social-material/get-child-category-list',
        method: 'get',
        params: {
          categoryId: id,
          queryType: 1
        }
      }).then((res) => {
        const filterCategories = this.firstCategories.filter((item) => item.id === id)
        this.templateType = filterCategories.length > 0 ? filterCategories[0].templateType : ''
        this.secondCategories = res.data
        if (!this.$route.query.id) {
          this.addOrEditForm.sencondCategory = res.data.length > 0 ? res.data[0].id : ''
          this.addOrEditForm.sencondCategoryTitle = res.data.length > 0 ? res.data[0].id : ''
        }
        this.getthirdCategoryData(this.addOrEditForm.sencondCategory, true)
      }).catch(err => {
        console.log(err)
      })
    },
    getthirdCategoryData(id, flag) {
      this.addOrEditForm.sencondCategory = id
      if (!flag){
        this.addOrEditForm.tags = []
      }
      this.request({
        url: '/zhongcao-web-manage/social-material/get-child-category-list',
        method: 'get',
        params: {
          categoryId: id,
          queryType: 1
        }
      }).then((res) => {
        this.loading = false
        const filterSecondCategories = this.secondCategories.filter((item) => item.id === id)
        this.templateProperties = filterSecondCategories.length > 0 ? filterSecondCategories[0].templateProperties : ''
        this.thirdCategories = res.data
        if (!this.$route.query.id) {
          this.addOrEditForm.tags = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 发布人
    accounts() {
      this.request({
        url: '/zhongcao-web-manage/social-material/accounts',
        method: 'get'
      }).then((res) => {
        this.accountsData = res.data.data
      }).catch(err => {
        console.log(err)
      })
    },
    chooseOneGoods(type) {
      if (type === 1) {
        this.goodsChoose({ count: 1 }, this.addOrEditForm.goods).then(val => {
          this.addOrEditForm.goods = []
          this.addOrEditForm.goods.push({
            goodsId: val[0].goodsId,
            goodsImageUrl: val[0].image,
            goodsName: val[0].name,
            price: val[0].price,
            marketPrice: val[0].marketValue,
            goodsType: 1,
            packType: ''
          })
        })
      } else if (type === 2) {
        this.packageChoose({ count: 1 }, this.addOrEditForm.goods).then(val => {
          const needAddGoods = differenceBy(val, this.addOrEditForm.goods, 'goodsId')
          this.addOrEditForm.goods = []
          this.addOrEditForm.goods.push({
            goodsId: val[0].packageId,
            goodsImageUrl: val[0].image,
            goodsName: val[0].name,
            price: val[0].price,
            marketPrice: val[0].marketValue,
            goodsType: 2,
            packType: ''
          })
        })
      }
    },
    // 选择商品
    chooseGoods() {
      const goodsChecked = []
      this.addOrEditForm.goods.forEach(item => {
        if (item.goodsType === 1) {
          goodsChecked.push({ goodsId: item.goodsId, name: item.goodsName })
        }
      })
      this.goodsChoose({ count: -1 }, goodsChecked).then(val => {
        const goodsList = this.addOrEditForm.goods
        const needDelGoods = differenceBy(goodsList, val, 'goodsId')
        const needAddGoods = differenceBy(val, goodsList, 'goodsId')
        const needDelreal = []
        for (var k = 0; k < needDelGoods.length; k++) {
          if (needDelGoods[k].goodsType === 1) {
            needDelreal.push(needDelGoods[k])
          }
        }
        for (var i = 0; i < this.addOrEditForm.goods.length; i++) {
          for (var j = 0; j < needDelreal.length; j++) {
            if (this.addOrEditForm.goods[i].goodsId === needDelreal[j].goodsId) {
              this.addOrEditForm.goods.splice(i, 1)
            }
          }
        }
        needAddGoods.forEach((item) => {
          this.addOrEditForm.goods.push({
            goodsId: item.goodsId,
            goodsImageUrl: item.image,
            goodsName: item.name,
            price: item.price,
            marketPrice: item.marketValue,
            goodsType: 1,
            packType: ''
          })
        })
        this.isShowPackage = false
      })
    },
    // 选择套餐
    choosePackage() {
      const packageChecked = []
      this.addOrEditForm.goods.forEach(item => {
        if (item.goodsType === 2) {
          packageChecked.push({ packageId: item.goodsId, name: item.goodsName })
        }
      })
      this.packageChoose({ count: -1 }, packageChecked).then(val => {
        val.forEach(item => {
          item.goodsId = item.packageId
        })
        const needDelGoods = differenceBy(this.addOrEditForm.goods, val, 'goodsId')
        const needAddGoods = differenceBy(val, this.addOrEditForm.goods, 'goodsId')
        const needDelreal = []
        for (var k = 0; k < needDelGoods.length; k++) {
          if (needDelGoods[k].goodsType === 2) {
            needDelreal.push(needDelGoods[k])
          }
        }
        for (var i = 0; i < this.addOrEditForm.goods.length; i++) {
          for (var j = 0; j < needDelreal.length; j++) {
            if (this.addOrEditForm.goods[i].goodsId === needDelreal[j].goodsId) {
              this.addOrEditForm.goods.splice(i, 1)
            }
          }
        }
        needAddGoods.forEach((item) => {
          this.addOrEditForm.goods.push({
            goodsId: item.goodsId,
            goodsImageUrl: item.image,
            goodsName: item.name,
            price: item.price,
            marketPrice: item.marketValue,
            goodsType: 2,
            packType: ''
          })
        })
        this.isShowGoods = false
      })
    },
    // 删除商品/套餐
    delItem(row, index) {
      this.$confirm(`确定要删除吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addOrEditForm.goods.splice(index, 1)
      }).catch(err => {
        console.log(err)
      })
    },
    save() {
      this.$refs.form.validate(valid => {
        // 当为素材圈
        if (this.templateType === 1 && this.addOrEditForm.urlType===3 && this.addOrEditForm.goods.length === 0 ) {
          this.$message.error('请选择商品/套餐')
          return false
        }
        if (this.templateType === 1 && this.addOrEditForm.goods.length > 5) {
          this.$message.error('所选商品和套餐数量超过5条,请移除一些再继续!')
          return false
        }
        // 产品素材-商品素材
        if (this.templateType === 2 && this.templateProperties === 1 && this.addOrEditForm.goods.length === 0) {
          this.$message.error('请选择商品/套餐')
          return false
        }
        if (!valid) {
          return false
        }
        
        if (this.addOrEditForm.stickStatus === 0) {
          this.addOrEditForm.stickTime = ''
          this.addOrEditForm.stickTimeUnit = 1
        }
        if(this.templateType === 1 && this.addOrEditForm.urlType===1){
          this.addOrEditForm.urlDetail={}
          this.addOrEditForm.goods=[]
        }else if(this.addOrEditForm.urlType===2){
          this.addOrEditForm.goods=[]
        }else if(this.addOrEditForm.urlType===3){
          this.addOrEditForm.urlDetail={}
        }
        this.addOrEditLoading = true
        this.request({
          url: '/zhongcao-web-manage/social-material/submit',
          method: 'post',
          data: this.addOrEditForm
        }).then((res) => {
          this.addOrEditLoading = false
          if (res.data === true) {
            this.$message.success('保存成功')
            this.$store.dispatch('delVisitedViews', this.$route)
            this.$router.push({ name: 'list' })
          } else {
            this.$message.error('保存失败')
          }
        }).catch(err => {
          this.addOrEditLoading = false
          console.log(err)
        })
      })
    },
    uploadImg(event, item, len, type) {
      this.addFilesLen= item.length + event.target.files.length
      if (len != '' && this.addFilesLen > len) {
        this.addFilesLen=this.addFilesLen-event.target.files.length
        this.$message.error(`上传超过${len}张图片`)
        return false
      }
      for (let i = 0; i < event.target.files.length; i++) {
        const everyFiles = event.target.files[i]
        // 图片
        if (type === 'img') {
          if (!everyFiles.type.match('image/')) {
            this.$message.error('请上传图片')
            return false
          }
          this.picFileUpload(everyFiles, (res) => {
            item.push(this.replaceImgUrl(res.filePath))
          }, { limitSize: 5 })
        }
        // 视频
        if (type.match('video') && type.match('video')[0] === 'video') {
          this.mulVideoLoading = true
          if (!everyFiles.type.match('video/mp4')) {
            this.mulVideoLoading = false
            this.$message.error('请上传MP4视频')
            return false
          }
          if (everyFiles.size > 25 * 1024 * 1024) {
            this.mulVideoLoading = false
            this.$message.error('上传视频大小不能超过 25MB!')
            return false
          }
          this.picFileUpload(everyFiles, (res) => {
            this.mulVideoLoading = false
            if (type === 'video') {
              item.push({
                videoPreviewImg: res.snapshot,
                resourceUrl: res.filePath
              })
            }
          }, '', '', 'shot')
        }
      }
    },
    beforeUploadImg(file) {
      if (!file.type.match('image/')) {
        this.$message.error('请上传图片')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    beforeUploadVideo(file) {
      this.videoLoading = true
      if (!file.type.match('video/mp4')) {
        this.videoLoading = false
        this.$message.error('请上传MP4视频')
        return false
      }
      const isLt25M = file.size / 1024 / 1024 < 25
      if (!isLt25M) {
        this.videoLoading = false
        this.$message.error('上传视频大小不能超过 25MB!')
      }
      return isLt25M
    },
    handleAvatarSuccess(res, file) {
      this.videoLoading = false
      this.addOrEditForm.mediaResources.resourceUrl = [res.filePath]
      this.addOrEditForm.mediaResources.videoPreviewImg = res.snapshot
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/_mixin.scss";
    .block-header{
        color: #1ea0ff;
        font-size: 14px;
        padding: 12px 0;
        margin-bottom: 12px;
        background: #f7f7f7;
        &>div{
            padding: 0 12px;
            border-left: 2px solid #1ea0ff;
        }
    }
    #cover{
       .el-upload,
       .upload-img-list li,
       .upload-img-list .upload-btn{
         width: 75px;
         height: 75px;
         line-height: 80px;
       }
       .avatar-uploader-icon{
         font-size: 18px;
       }
    }
    .uploadLocal{
        position: absolute;
        bottom: -40px;
        font-size: 16px;
        color: #409EFF;
        left: 60px;
    }
    .contentUrl{
      .el-input{
        display: block;
      }
    }
    .agingClass{
      display: inline-block;
      .el-input{
        width: 60px;
      }
    }
    .videoLoading{
      .el-loading-mask{
        width: 178px;
        height: 178px;
        line-height: 20px;
        top: 1px;
        left: 1px;
      }
    }

</style>